<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>联想手机5s 烈焰红</title>
<link rel="icon" type="image/x-icon" href="${basePath }static/img/HomePageImg/cat3.jpg" />
<link rel="stylesheet" type="text/css"	href="${basePath }static/css/sen/showcomment.css" />
<link rel="stylesheet"	href="${basePath }static/bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="${basePath }static/css/HomePageCss/cool.css" />
<link rel="stylesheet" href="${basePath }static/css/HomePageCss/top.css" />
<link rel="stylesheet" href="${basePath }static/css/HomePageCss/rightbar.css" />
<link rel="stylesheet" href="${basePath }static/css/sj/product.css">

</head>
<%
	//获取上层页面传入的phoneid
	String buttonValue = request.getParameter("name");
%>
<body onload="show()">

<!-- 插入前两栏 -->
<%@ include file="../menu.jsp" %>

<!-- 隐藏内容 -->
<input type="hidden" id="usertel" name="usertel" value="<%=session.getAttribute("userTel") %>" />
<input type="hidden" id="phoneid" name="phoneid" value="41" />


	<div id="logo" class="pinned">
		<img src="${basePath }static/img/sj/33.jpg" />
	</div>



	
	</div>
	<div class="picture" style="height: 570px; width: 30%; margin-top: 15px; margin-left: 90px;">
		<img id="img1" src="${basePath }static/img/sj/4.jpg" style="display: none;"
			border="1" width="560px" height="570px"> <img id="img2"
			src="${basePath }static/img/sj/5.jpg" style="display: none;" border="1"
			width="470px" height="570px"> <img id="img3"
			src="${basePath }static/img/sj/6.jpg" style="display: none;" border="1"
			width="470px" height="570px"> <img id="img4"
			src="${basePath }static/img/sj/7.jpg" style="display: none;" border="1"
			width="470px" height="570px">

	</div>
	<div class="write"
		style="height: 500px; margin-right: 50px; width: 48%;">
		<div id="write1">
			<h1 style="color: red;">联想5s 3GB+32GB烈焰红</h1>
		</div>
		<div id="write1">
			<h4>后置1300W双摄+1600W前置摄像头，智慧双摄，美耀全面屏</h4>
		</div>
		<div id="write1">
			<h3>促销信息:</h3>
			<h4>下单满减：联想s5 3GB+32GB下单满399减200元，到手价799</h4>
			<h4 style="color: darkred">赠品：联想5s 赠原装保护壳+联想DP-20耳机（颜色随机）</h4>
			<h4>
				<font size="-1">温馨提示：如无质量问题，联想手机激活后将不支持七天无理由退货，请您谅解！</font>
			</h4>
		</div>
		<div id="write1">
			<h3>搭配赠品&nbsp;赠完为止</h3>
		</div>
		<div id="write2" style="width: 50%;">
			<img src="${basePath }static/img/sj/8.jpg" height="100px" width="100px"
				href="" />
			<h4 style="color: darkred;">DP-20双发声单元Hi-Fi耳机</h4>
		</div>
		<div id="write2" style="width: 50%;">
			<img src="${basePath }static/img/sj/9.jpg" height="100px" width="100px"
				href="" />
			<h4 style="color: darkred;">联想S5手机保护壳</h4>
		</div>
	</div>


	<div style="clear: both"></div>
	<div class="detail"
		style="width: 100%; height: 80px; text-align: center;">
		<g> <img src="${basePath }static\img\HomePageImg\L.jpg" /></g>
		<a class="aaaa" href="javascript:void(0)"> <h22>商品详情</h22></a> <a
			class="bbbb" href="javascript:void(0)"> <h22>配置信息</h22></a> <a
			class="cccc" href="javascript:" onclick="dojquery()"> <h22>商品评价</h22></a>
	</div>
	<div class="circle" style="display: block; margin-top: 100px;">
		<div id="circle1">
			<img src="${basePath }static/img/sj/12.jpg" style="width: 100%;" />
		</div>
		<div id="circle1">
			<img src="${basePath }static/img/sj/13.jpg" style="width: 100%;" />
		</div>
		<div id="circle1">
			<img src="${basePath }static/img/sj/14.jpg" style="width: 100%;" />
		</div>
		<div id="circle1">
			<img src="${basePath }static/img/sj/29.jpg" style="width: 100%;" />
		</div>
		<div id="circle1">
			<img src="${basePath }static/img/sj/15.jpg" style="width: 100%;" />
		</div>
		<div id="circle1">
			<img src="${basePath }static/img/sj/20.jpg" style="width: 100%;" />
		</div>
		<div id="circle1">
			<img src="${basePath }static/img/sj/16.jpg" style="width: 100%;" />
		</div>
		<div id="circle1">
			<img src="${basePath }static/img/sj/26.jpg" style="width: 100%;" />
		</div>
		<div id="circle1">
			<img src="${basePath }static/img/sj/32.jpg" style="width: 100%;" />
		</div>
	</div>
	<div class="circle3"></div>
	<div style="clear: both"></div>
	<div class="circle2" style="display: none;">
		<h2 style="text-align: center;">主体</h2>
		<div id="1">
			<p>
			<h3>型号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;k520</h3>
			</p>
		</div>
		<div id="1">
			<p>
			<h3>颜色&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;烈焰红</h3>
			</p>
		</div>
		<div id="1">
			<p>
			<h3>外观形态&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全金属一体化机身，紧凑全面屏设计，精巧机身，舒适握感</h3>
			</p>
		</div>
		<div id="1">
			<p>
			<h3>系统&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高通骁龙625</h3>
			</p>
		</div>
		<div id="1">
			<p>
			<h3>CPU核数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;八核</h3>
			</p>
		</div>
		<div id="1">
			<p>
			<h3>CPU频率&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.0GHz</h3>
			</p>
		</div>
		<h2 style="text-align: center;">存储</h2>
		<div id="1">
			<p>
			<h3>机身内存（ROM）&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;64GB</h3>
			</p>
		</div>
		<div id="1">
			<p>
			<h3>运行内存（RAM）&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4GB</h3>
			</p>
		</div>
		<div id="1">
			<p>
			<h3>最大存储扩展&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;128GB</h3>
			</p>
		</div>
		<h2 style="text-align: center;">显示屏</h2>
		<div id="1">
			<p>
			<h3>尺寸&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5.7英寸</h3>
			</p>
		</div>
		<div id="1">
			<p>
			<h3>手机分辨率&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2160*1080</h3>
			</p>
		</div>
		<div id="1">
			<p>
			<h3>触摸屏&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电容屏，多点触控</h3>
			</p>
		</div>
		<h2 style="text-align: center;">感应与特殊功能</h2>
		<div id="1">
			<p>
			<h3>重力感应&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;支持</h3>
			</p>
		</div>
		<div id="1">
			<p>
			<h3>光线传感器&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;支持</h3>
			</p>
		</div>
		<div id="1">
			<p>
			<h3>距离感应&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;支持</h3>
			</p>
		</div>
		<h2 style="text-align: center;">摄像功能</h2>
		<div id="1">
			<p>
			<h3>摄像头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;后置1300万（AF）+1300万像素（AF）双摄像头</h3>
			</p>
		</div>
		<div id="1">
			<p>
			<h3>闪光灯&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;双色温闪光灯</h3>
			</p>
		</div>
		<div id="1">
			<p>
			<h3>视频拍摄&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4k视频拍摄，1080p视频拍摄，720p视频拍摄</h3>
			</p>
		</div>
		<div id="1">
			<p>
			<h3>拍摄模式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;背景虚化，夜景增强，黑白模式，相机扫码，HDR，专业模式，手势拍照，全景拍照，录像中拍照</h3>
			</p>
		</div>
	</div>
	<div class="comment-area" style="display: none; width: 1200px">
		<div class="filter-lsit" style="width: 500px; height: 50px;">
			<ul class="comment-filter-list">
				<li><input type="radio" name="filter-radio" checked="checked"
					value="radio1">全部评价</input></li>
				<li><input type="radio" name="filter-radio" value="radio2">追评</input>
				</li>
				<li><input type="radio" name="filter-radio" value="radio3">有图的评价</input>
				</li>
			</ul>
		</div>
		<div id="reviewcontent1">
			<div id="userid" style="width: 150px; height: 210px; float: left;">183****6134</div>
			<div id="viewcontent">
				<div id="userreview" style="height: 99px;">很好~~起来很舒服！！！</div>
				<div id="servicereview"
					style="height: 75px; width: 1000px; padding: 10px 20px; background-color: #E8E8E8; left: 10px;">
					<div>客服:</div>
					&nbsp;谢谢支持~！！
				</div>
			</div>
		</div>
		<div id="reviewcontent2"></div>
	</div>

	<div class="border_end" id="div_button_group">
		

	<div class="right" id="p">
		<p>选择数量：</p>
		<div id="jj" >
			<form id="form1" runat="server" >
				<div id="add1" >
					<input type="button" value="-" id="remove" onclick="remove1()"> 
					<input type="text" value="1" id="tx1" >
					<input type="button" value="+" id="add" 	class="rightStyle" onclick="add1()">
				</div>
			</form>
		</div>
	</div>

	<div class="money" id="p" style="margin-left:120px">
		<span><h1 id="s">商城价：999.00</h1></span>
	</div>

	<div id="blueBtn">
		<a href="${basePath }jump?pg=alipay/index_alipay">
			<button id="lj" type="submit" class="price1" name="phoneiddown" value="28">立即购买</button>
		</a>
		<button id="jr" onclick="addCar()">加入购物车</button>
	</div>
	</div>

	<div class="end" style="background-color: brown; margin-top:40px">
		<h3>
			<a href="">购物指南</a> <a href="">服务商信息</a> <a href="">购买流程</a> <a
				href="">注册登录</a> <a href="">联想商城</a> <a href="">o元试用</a> <a href="">极速到家</a>
			<a href="">联想合伙人</a> <a href="">私人订制</a> <a href="">以旧换新</a> <a
				href="">联想众筹</a> <a href="">驱动与软件下载</a> <a href="">保修配置查询</a> <a
				href="">服务政策查询</a> <a href="">上门快修</a> <a href="">联想IT管理服务</a>
		</h3>
	</div>

</body>

<script type="text/javascript"  src="${basePath }static/js/jquery-1.12.4.min.js" charset="utf-8"></script>
<script type="text/javascript"	src="${basePath }static/js/HomePageJs/jquery.pin.js"></script>
<script type="text/javascript"	src="${basePath }static/js/HomePageJs/registerImg.js"></script>
<script type="text/javascript"	src="${basePath }static/js/HomePageJs/layer-v3.1.1/layer/layer.js"></script>

<script type="text/javascript">
			function dojquery() {
				// 使用jquery进行ajax请求处理

		$.ajax({
					type : "GET",
					url : '${basePath }QueryComment',
					data : $("#reviewcontent").serialize(),
					dataType : "json",
					success : function(data) {
						// 将请求的数据放输出到div里面
						console.info(data);
						var strHtml = "";
						$.each(data,function(index, eachVal) {
											strHtml += "<div id='reviewcontent'>";

											strHtml += "<div id='userid' style='float:left;text-align:center;'>";
											strHtml += eachVal.userid;
											strHtml += "</div>";

											strHtml += "<div id='viewcontent'>";

											strHtml += "<div id='userreview'>";
											strHtml += eachVal.userreview;
											strHtml += "</div>";

											strHtml += "<div id='servicereview' style='width:1000px'>";
											strHtml += "<div>";
											strHtml += "客服：";
											strHtml += "</div>";
											strHtml += "&nbsp;&nbsp;&nbsp;&nbsp;"
													+ eachVal.servicereview;
											strHtml += "</div>";

											strHtml += "</div>";
											strHtml += "</div>";

										});

						// 把解析的html内容，使用dom操作赋值到表格中
						$("#reviewcontent2").html(strHtml);
					},
					error : function(data) {
						alert("请求失败" + data);
					}

				});
		<script>
		var nowShow=1;
		function show(index){
		if(Number(index)){
			clearTimeout(sid);
			nowShow=index;
		}
		for(var i=1;i<5;i++) {
			if(i==nowShow)
			document.getElementById("img"+nowShow).style.display="";
			else 
			document.getElementById("img"+i).style.display="none";
		}
		if(nowShow==4)
		nowShow=1;
		else
		nowShow++;
		sid=setTimeout('show()',3000);
	}
</script>
<script>
	var nowShow = 1;
	function show(index) {
		if (Number(index)) {
			clearTimeout(sid);
			nowShow = index;
		}
		for (var i = 1; i < 5; i++) {
			if (i == nowShow)
				document.getElementById("img" + nowShow).style.display = "";
			else
				document.getElementById("img" + i).style.display = "none";
		}
		if (nowShow == 4)
			nowShow = 1;
		else
			nowShow++;
		sid = setTimeout('show()', 3000);
	}
</script>

<script type="text/javascript">
	$(".aaaa").click(function() {
		$(".circle").css("display", "block");
		$(".circle2").css("display", "none");
		$(".circle3").css("display", "none");
	});

	$(".bbbb").click(function() {
		$(".circle2").css("display", "block");
		$(".circle").css("display", "none");
		$(".circle3").css("display", "none");
	});
	$(".cccc").click(function() {
		$(".comment-area").css("display", "inline-block");
		$(".comment-area").css("margin-left", "150px");
		$(".circle").css("display", "none");
		$(".circle2").css("display", "none");

	})

	$(document).ready(function() {

		$.ajax({
			type : "POST", // 请求类型
// 			url : "ProductPrice", // 请求的url
			data : "phoneid=" +<%=buttonValue%>,// 发送的数据 使用serialize方法替代手动拼写数据串
			dataType : "json",
			success : function(data, textStatus, jqXHR) {
				$.each(data, function(index, eachVal) {
					alert(eachVal.phonename);
					var phonename = eachVal.phonename;
					var phoneprice = eachVal.phoneprice;
					alert(eachVal.phoneprice);
					document.getElementById("s").html = "eachVal.phoneprice";
					$("#s").val(eachVal.phoneprice);
				});
			}
		});

		$("g").click(function() {
			$("h22").slideToggle("slow");

		});
	});
</script>
<script type="text/javascript">
	//添加购物车成功弹框
	function tan() {
		parent.layer.msg('加入购物车成功！', {
			icon : 1
		});
	}
	//添加购物车失败弹框
	function tan2() {
		parent.layer.msg('加入购物车失败！', {
			icon : 2
		});
	}
	
	var $num=document.getElementById("tx1").value;
	//减1
	function  remove1(){
		$num = parseInt($num)-1;
	}
	
	//加1
	function  add1(){
		$num=  parseInt($num)+1;
	}
	
</script>
<script type="text/javascript">
function dojquery() {
	// 使用jquery进行ajax请求处理

	$.ajax({
		type : "GET",
		url : 'QueryComment',
		data : $("#reviewcontent").serialize(),
		dataType : "json",
		success : function(data) {
			// 将请求的数据放输出到div里面
			console.info(data);
			var strHtml = "";
			var servicereview="";
			$.each(data, function(index, eachVal) {
				var userID = eachVal.userid;
				var showID = userID.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
				strHtml += "<div id='reviewcontent'>";

				strHtml += "<div id='userid' style='float:left;text-align:center'>";
				strHtml += showID;
				strHtml += "</div>";
				
				strHtml +="<div id='viewcontent'>";
				
				strHtml += "<div id='userreview'>";
				strHtml += eachVal.userreview;
				strHtml += "</div>";
	
				if(eachVal.servicereview==null){
					servicereview="暂未回复";
				}else{
					servicereview = eachVal.servicereview;
				}
				
				strHtml += "<div id='servicereview' style='width:1000px;display:1;'>";
				strHtml += "<div>";
				strHtml += "客服：";
				strHtml += "</div>";
				strHtml += "&nbsp;&nbsp;&nbsp;&nbsp;"+servicereview;
				strHtml += "</div>";
				
				strHtml += "</div>";
				strHtml += "</div>";
				
			});

			// 把解析的html内容，使用dom操作赋值到表格中
			$("#reviewcontent2").html(strHtml);
		},
		error : function(data) {
			alert("请求失败" + data);
		}

	});
}
</script>

<script type="text/javascript">
		function ShowLogin() {
			layer.open({
				type: 2,
    			title: '登录',
    			maxmin: true,
    			area: ['800px', '600px'],
    			content: '${basePath }jump?pg=userlogin_1',
			});
		}
</script>
<script type="text/javascript">
	$(document).ready(function(){
		var o=document.getElementById("sign1");//获取父节点
		var a=document.getElementById("loginImg");//获取需要删除的子节
		//获取用户的登录账号（手机号）
		var $isLogin=<%=session.getAttribute("userTel")%>
		//判断是否登录
		if(null == $isLogin || "undefined" == typeof($isLogin) || "" == $isLogin){
			
		}else{
			
			o.removeChild(a); //从父节点o上面移除子节点a;
			$("#sign1").html("<span ><%=session.getAttribute("userName")%></span>");
			document.getElementById("userstatus").style.display="";
		}
	});
</script>

<script type="text/javascript">
function addCar() {
	alert("1");

	if($("#usertel").val()===null || $("#usertel").val()=="undefined"){

	alert("请登陆!");
	}else{

	//使用jquery进行ajax请求处理

	$.ajax({
		type : "POST",
		url : "addShoppingCar",
		data : "phoneid=" +	$("#phoneid").val(),   //$("#reviewcontent").serialize(),
		//dataType : "json",
		success : function(data) {
			if(data=="1"){
			//跳出弹框	
			tan();
			}else{
			//跳出弹框	
			tan2();
			}
		},
		error : function(data) {
			alert("请求失败" + data);
		}

	});

		}
	}

</script>

</html>